import React, { Component } from "react";
import { Link, Outlet, Routes, Route, useNavigate } from "react-router-dom";
import Detail from "./Detail";

function messageComponent(MessCom) {
    return (props) => {
        let navigate = useNavigate();
        return <MessCom {...props} navigate={navigate} />;
    };
}

class Message extends Component {
    state = {
        messageArr: [
            { id: "01", title: "message1" },
            { id: "02", title: "message2" },
            { id: "03", title: "message3" },
        ],
    };

    pushShow = (messageObj) => {
        this.props.navigate(`detail/${messageObj.id}/${messageObj.title}`);
    };

    replaceShow = (messageObj) => {
        this.props.navigate(`detail/${messageObj.id}/${messageObj.title}`, {
            replace: true,
        });
    };

    goBack = () => {
        this.props.navigate(-1);
    };

    goOne = () => {
        this.props.navigate(1);
    };

    goTwo = () => {
        this.props.navigate(2);
    };

    render() {
        return (
            <div>
                <ul>
                    {this.state.messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                {/* 向路由组件传递params参数 */}
                                {/* <Link
                                    to={`detail/${msgObj.id}/${msgObj.title}`}
                                >
                                    {msgObj.title}
                                </Link> */}
                                {/* 向路由组件传递search参数 */}
                                {/* <Link
                                    to={`detail/?id=${msgObj.id}&title=${msgObj.title}`}
                                >
                                    {msgObj.title}
                                </Link> */}
                                {/* 向路由组件传递 state 参数 */}
                                <Link
                                    replace={true}
                                    to="detail"
                                    state={{
                                        id: msgObj.id,
                                        title: msgObj.title,
                                    }}
                                >
                                    {msgObj.title}
                                </Link>
                                &nbsp;
                                <button onClick={() => this.pushShow(msgObj)}>
                                    push查看
                                </button>
                                &nbsp;
                                <button
                                    onClick={() => this.replaceShow(msgObj)}
                                >
                                    replace查看
                                </button>
                            </li>
                        );
                    })}
                </ul>
                <hr />
                <Outlet />
                <hr />
                <Routes>
                    {/* 声明接受params参数 */}
                    {/* <Route path="detail/:id/:title" element={<Detail />} /> */}
                    {/* search参数无需声明接受,正常注册路由即可 */}
                    {/* <Route path="detail" element={<Detail />} /> */}
                    {/* state参数无需声明接受,正常注册路由即可 */}
                    <Route path="detail" element={<Detail />} />
                </Routes>
                <button onClick={this.goBack}>回退</button>
                <button onClick={this.goOne}>前进</button>
                <button onClick={this.goTwo}>go 2</button>
            </div>
        );
    }
}

export default messageComponent(Message);
